<template>
  <div class="wrapper">
    <home-header @open="handleAddressOpen" :homeAddressTitle="homeAddressTitle"></home-header>
    <home-icons :geohash="geohash" v-if="hasGetShopsData" :foodTypes="foodTypes"></home-icons>
    <home-shop-list :geohash="geohash" v-if="hasGetShopsData">
      <div slot="recommend">
        <div class="title">
          <h3>推荐商家</h3>
        </div>
        <div class="filter" :class="{isFixed: isFixed}">
          <ul>
            <li>
              <a href="#">
                <span>综合排序</span>
                <span class="iconfont arrow">&#xe771;</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span>距离最近</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span>销量最高</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span>筛选</span>
                <span class="iconfont">&#xe7bb;</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div slot="loading" >
        <van-loading color="#1989fa" class="loading"/>
      </div>
    </home-shop-list>
    <home-select-address v-else @open="handleAddressOpen"></home-select-address>
    <home-footer></home-footer>
    <fade-animation>
      <!-- 用v-show，better-scroll会失效，要用v-if -->
      <home-choose-address v-if="showChooseAddress" @open="handleCityOpen" @close="handleAddressClose"></home-choose-address>
    </fade-animation>
    <fade-animation>
      <home-city v-if="showCity" @close="handleCityClose"></home-city>
    </fade-animation>
  </div>
</template>

<script>
import { Loading } from 'vant'
import HomeHeader from './components/Header'
import HomeIcons from './components/Icons'
import HomeSelectAddress from './components/SelectAddress'
import HomeShopList from '@/components/common/ShopList'
import HomeFooter from '@/components/footer/Footer'
import FadeAnimation from '@/components/common/FadeAnimation'
import HomeChooseAddress from '@/pages/chooseAddress/ChooseAddress'
import HomeCity from '@/pages/city/City'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeIcons,
    HomeShopList,
    HomeSelectAddress,
    HomeFooter,
    FadeAnimation,
    HomeChooseAddress,
    HomeCity,
    [Loading.name]: Loading
  },
  data () {
    return {
      isFixed: false,
      homeAddressTitle: '未能获取地址', // home页面头部标题
      foodTypes: [], // 食品分类列表
      hasGetShopsData: false, // 是否已经获取地理位置数据，成功之后再获取商铺列表信息
      showChooseAddress: false,
      showCity: false
    }
  },
  computed: {
    ...mapState(['geohash'])
  },
  mounted () {
    if (this.geohash) {
      this.getHomeData()
    } else {
      this.showChooseAddress = true
      this.$api.home.cityGuess().then(res => {
        this.geohash = res.data.latitude + ',' + res.data.longitude
      })
    }

    window.addEventListener('scroll', this.watchScroll)
  },
  // async beforeMount () {
  //   let res = await this.$api.home.groupcity()
  //   this.SAVE_GROUPCITY(res.data)
  // },
  watch: {
    geohash (value) {
      this.getHomeData()
    }
  },
  methods: {
    handleAddressOpen () {
      this.showChooseAddress = true
    },
    handleAddressClose (geohash) {
      this.showChooseAddress = false
    },
    handleCityOpen () {
      this.showCity = true
    },
    handleCityClose () {
      this.showCity = false
    },
    ...mapMutations(['SAVE_GEOHASH', 'RECORD_ADDRESS']),
    // ...mapMutations(['SAVE_GROUPCITY'])

    async getHomeData () {
      // 获取导航食品类型列表
      await this.$api.home.homeFoodTypes(this.geohash).then(res => {
        this.foodTypes = res.data
      })
      // 保存geohash到vuex
      this.SAVE_GEOHASH(this.geohash)
      await this.$api.home.homeAddress(this.geohash).then(res => {
        this.homeAddressTitle = res.data.name

        // 记录当前经度纬度
        this.RECORD_ADDRESS(res.data)
      })
      this.hasGetShopsData = true
    },

    watchScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 当滚动超过 50 时，实现吸顶效果
      if (scrollTop > 50) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
    .wrapper
      padding-bottom: 1.2rem
</style>
